﻿@model FCDB.Entity.FormAttachment
@{
    ViewBag.Title = "附件选择框";
    Layout = "~/Views/Shared/_FormLayout.cshtml";
}
@section HeadIncluder 
{
    <link href='@Url.Content("~/Content/public.css")' rel="stylesheet" />
    <link href='@Url.Content("~/Content/con_style.css")' rel="stylesheet" />
    <link href='@Url.Content("~/Scripts/webuploader-0.1.5/webuploader.css")' rel="stylesheet" />
    }
    <table width="100%" class="left_xx" >
        <tr>
            <td class="text_w" align="center" style="width:120px; ">
                <input id="hID" type="hidden"  name="ID" value="@Model.ID" /> 
                 <input id="hFormID" type="hidden"  name="FormID" value="@Model.FormID" />
                <input id="hFormType" type="hidden"  name="FormType" value="@Model.FormType" />
                类型：
            </td>
            <td class="lable">
                <input value="1" checked="checked" id="AttachmentType" name="AttachmentType" type="radio"  />附件
                <input value="2" id="Radio1" name="AttachmentType" type="radio" />网址
            </td>
        </tr>
        <tr>
            <td class="text_w" align="center" id="lbAttachment" >路径：</td>
            <td  class="lable" id="tdfileAttachment">
                <div id="uploader" class="wu-example">                  
                    <div id="thelist" class="uploader-list"></div>
                    <div class="btns">
                        <div id="picker">选择文件</div>
                        <button id="ctlBtn" class="ui_state_highlight fj btn_c3 btn_s">开始上传</button>
                        <input id="hAttachment"  name="Attachment" type="hidden"  />
                    </div>
                </div>
                @*<input id="fileAttachment"  name="Attachmentflie" type="file" />*@ 
            </td>
        </tr>
        <tr>
            <td class="text_w" align="center">名称：</td>
            <td  class="lable">
                <input id="txtName" class="in_c1" name="Name" type="text" /></td>
        </tr>
        <tr>
            <td class="text_w" align="center">备注：</td>
            <td  class="lable">
                <textarea id="txtRemark"  name="Remark" class="in_c1"  style="width: 98%;" cols="20" rows="2"></textarea>
            </td>
        </tr>
    </table> 
    <div class="ui_buttons cxl" style="background: #d4e4f6; padding-right: 20px;">
        <button type="button" value="取消" onclick="cancel();" class="fj btn_c3 btn_s" >取消</button>
        <button id="subbtn" type="button" value="确定" class="ui_state_highlight fj btn_c3 btn_s" >确定</button>
        <button type="reset" value="重置"  class="fj btn_c3 btn_s"> 重置</button>
    </div>
    <script src=@Url.Content("~/Scripts/jquery.form.js") type="text/javascript"></script>
    <script src=@Url.Content("~/Scripts/webuploader-0.1.5/webuploader.js") type="text/javascript"></script>
    <script type="text/javascript">       
        $(function () {
            $("#frmAttachement").validationEngine({ promptPosition: "topLeft" });
            $("input[name='AttachmentType']").bind("click", function () {
                var typeId = $(this).val();
                $("#tdfileAttachment").html();
                if (typeId == "1") {
                    $("#tdfileAttachment").html('<div id="uploader" class="wu-example"><div id="thelist" class="uploader-list"></div><div class="btns"><div id="picker">选择文件</div> <input id="hAttachment"  name="Attachment" type="hidden"  /><input id="ctlBtn" type="button" value="开始上传" class="ui_state_highlight fj btn_c3 btn_s" /></div></div>');
                    $("#lbAttachment")[0].innerHtml = "路径：";
                    initWebUpload();
                } else {
                    $("#tdfileAttachment").html('<input id="txtAttachment" value="http://" name="Attachment" type="text" />');
                    $("#lbAttachment")[0].innerHtml = "网址：";
                }
            });
            $("#subbtn").click(function () {
                var ID = $("#hID").val();
                var FormID = $("#hFormID").val();
                var FormType = $("#hFormType").val();
                var AttachmentType = $('input:radio[name="AttachmentType"]:checked').val(); 
                var Name = $("#txtName").val();
                var Attachment = $('input[name="Attachment"]').val(); 
                var Remark = $("#txtRemark").val();
                $.post("@Url.Action("SubmitFormAttachement", "Form")", {
                    ID: ID, FormID: FormID, FormType: FormType, AttachmentType: AttachmentType, Name: Name,
                    Attachment: Attachment, Remark: Remark
                }, function (data) {
                    window.top.refresh(data.ID, data.Name, data.Attachment, data.Remark, data.AttachmentType);
                    window.top.oDG.close();
                }); 
            });
            initWebUpload();
        });
        function cancel() {
            window.top.oDG.close();
        };
        function initWebUpload()
        {
            var GUID = WebUploader.Base.guid();//一个GUID
            var $ = jQuery;
            var $list = $('#thelist');
            var uploader = WebUploader.create({
                // 选完文件后，是否自动上传。
                auto: false,
                // swf文件路径
                swf: '@Url.Content("~/Scripts/webuploader-0.1.5/Uploader.swf")',
                // 文件接收服务端。
                server: '@Url.Action("Upload", "Form")',
                pick: '#picker',
                chunked: true,//开始分片上传
                chunkSize: 204800,//每一片的大小
                formData: {
                    guid: GUID //自定义参数，待会儿解释
                },
                // 不压缩image, 默认如果是jpeg，文件上传前会压缩一把再上传！
                resize: false
            });
            // 当有文件被添加进队列的时候
            uploader.on('fileQueued', function (file) {
                $list.append('<div id="' + file.id + '" class="item">' +
                    '<h4 class="info">' + file.name + '</h4>' +
                    '<p class="state">等待上传...</p>' +
                '</div>');
            });
            // 文件上传过程中创建进度条实时显示。
            uploader.on('uploadProgress', function (file, percentage) {
            var $li = $('#' + file.id),
            $percent = $li.find('.progress .progress-bar');
                // 避免重复创建
                if (!$percent.length) {
                    $percent = $('<div class="progress progress-striped active">' +
                      '<div class="progress-bar" role="progressbar" style="width: 0%">' +
                      '</div>' +
                    '</div>').appendTo($li).find('.progress-bar');
                }

                $li.find('p.state').text('上传中');

                $percent.css('width', percentage * 100 + '%');
            });

            // 文件上传成功，给item添加成功class, 用样式标记上传成功。
            uploader.on('uploadSuccess', function (file, response) {
                $('#' + file.id).find('p.state').text('已上传');
                $.post('@Url.Action("Merge", "Form")', { guid: GUID, fileName: file.name }, function (data) {
                    $("#uploader .state").html("上传成功...");
                    $("#hAttachment").val(data.tarfileName);
                });
            });

            // 文件上传失败，显示上传出错。
            uploader.on('uploadError', function (file) {
                $('#' + file.id).find('p.state').text('上传出错');
            });

            // 完成上传完了，成功或者失败，先删除进度条。
            uploader.on('uploadComplete', function (file) {
                $('#' + file.id).find('.progress').fadeOut();                
                $("#txtName").val(file.name);
            });
            //开始上传
            $("#ctlBtn").click(function () {
                uploader.upload();
            });

        }
    </script>
 


